<!-- Animation -->
<template>
  <div v-if="AnimationList && AnimationImages" class="Animation">
    <div
      class="list"
      v-for="(item, index) in AnimationList.data ? AnimationList.data : AnimationList"
      :key="index"
      @click="playAnimation(item)"
    >
      <div class="imgbase">
        <!-- {{ index }} -->
        <img :src="'data:image/png;base64,' + AnimationImages[index].image" alt="" />
      </div>
      <div class="title">
        <span>
          {{ item.name }}
        </span>
      </div>
    </div>
  </div>
</template>

<script setup>
import { onMounted, onUnmounted, ref } from 'vue'
import { useAnimateStore } from '@/stores'

// 导览缩略图及列表
const AnimationList = ref()
const AnimationImages = ref()
const AnimationStore = useAnimateStore()
// 播放导览
const playAnimation = (val) => {
  //参数：导览序号
  __g.camera.playAnimation(val.id)
}
let timer = null
onMounted(async () => {
  if (AnimationStore.AnimationList.length > 0 && AnimationStore.AnimationImgList.length > 0) {
    AnimationList.value = AnimationStore.AnimationList
    AnimationImages.value = AnimationStore.AnimationImgList
  } else {
    AnimationList.value = await __g.camera.getAnimationList()
    AnimationImages.value = await Promise.all(
      AnimationList.value.data.map((item) => __g.camera.getAnimationImage(item.name))
    )
    timer = setInterval(() => {
      if (AnimationStore.AnimationList.length > 0 && AnimationStore.AnimationImgList.length > 0) {
        clearInterval(timer)
      } else {
        AnimationStore.AnimationList = AnimationList.value.data
        AnimationStore.AnimationImgList = AnimationImages.value
      }
    }, 500)
  }
})
onUnmounted(() => {
  __g.camera.stopAnimation()
})
</script>
<style lang="scss" scoped>
.Animation {
  position: absolute;
  width: 120px;
  height: 800px;
  top: 120px;
  right: 50px;
  margin: auto;
  overflow-y: auto;
  overflow-x: hidden;
  z-index: 10;
  .list {
    width: 100px;
    height: 100px;
    flex-shrink: 0;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-radius: 10px;
    margin: 0 10px 20px;
    overflow: hidden;
    cursor: pointer;
    position: relative;
    transition: all ease 0.7s;
    &:hover img {
      transform: scale(1.2);
    }
    .imgbase {
      width: 100px;
      height: 100px;
      img {
        transition: all 0.5s;
        width: 100%;

        // height: 100%;
      }
    }
    .title {
      width: 100px;
      text-align: center;
      position: absolute;
      bottom: 15px;
    }
  }
}
</style>
